<template>
  <div class="trend-analysis">
    <!-- Filter Card -->
    <div class="search-card">
      <div class="search-section">
        <div class="filter-item">
          <label>时间范围</label>
          <el-cascader v-model="queryParams.periodIds" :options="periodOptions"
            :props="{ multiple: true, emitPath: false }" placeholder="请选择调查期" collapse-tags collapse-tags-tooltip
            clearable class="custom-select" style="width: 320px" />
        </div>

        <div class="filter-item">
          <label>分析维度</label>
          <el-select v-model="queryParams.groupBy" placeholder="请选择分析维度" clearable class="custom-select" style="width: 180px">
            <el-option label="全省汇总" value="total" />
            <el-option label="按地区" value="region" />
            <el-option label="按性质" value="nature" />
            <el-option label="按行业" value="industry" />
          </el-select>
        </div>

        <div class="filter-item">
          <label>展示模式</label>
          <el-select v-model="displayMode" placeholder="请选择展示模式" class="custom-select" style="width: 160px">
            <el-option label="失业率" value="ratio" />
            <el-option label="岗位数量" value="count" />
            <el-option label="企业总数" value="enterprise" />
          </el-select>
        </div>

        <div class="filter-actions">
          <el-button type="primary" class="btn-primary-theme" @click="handleQuery" :loading="loading">
            查询
          </el-button>
        </div>
      </div>
    </div>

    <!-- Chart Card -->
    <div class="chart-card" v-if="chartData.periods.length > 0">
      <div class="card-header">
        <span class="card-title">{{ chartTitle }}</span>
      </div>
      <div class="chart-wrapper">
        <div ref="chartRef" class="chart-container"></div>
      </div>
    </div>

    <!-- Stats Grid -->
    <div class="stats-grid" v-if="stats.avg !== null">
      <div class="stat-card">
        <div class="stat-label">平均失业率</div>
        <div class="stat-value">{{ stats.avg }}%</div>
      </div>
      <div class="stat-card">
        <div class="stat-label">最高失业率</div>
        <div class="stat-value negative">{{ stats.max }}%</div>
      </div>
      <div class="stat-card">
        <div class="stat-label">最低失业率</div>
        <div class="stat-value positive">{{ stats.min }}%</div>
      </div>
      <div class="stat-card">
        <div class="stat-label">波动幅度</div>
        <div class="stat-value">{{ stats.range }}%</div>
      </div>
    </div>

    <!-- Table Card -->
    <div class="table-card" v-if="tableData.length > 0">
      <div class="card-header">
        <span class="card-title">趋势数据详情</span>
      </div>
      <el-table :data="tableData" class="modern-table"
        :header-cell-style="{ background: '#f8fafc', color: '#475569', fontWeight: '700', fontSize: '13px', height: '56px', textAlign: 'center' }"
        :cell-style="{ textAlign: 'center', padding: '12px 0' }">
        <el-table-column prop="periodName" label="调查期" align="center" fixed width="140">
          <template #default="{ row }">
            <span class="cell-primary-text">{{ row.periodName }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="queryParams.groupBy" prop="dimensionName" :label="getDimensionLabel()" align="center"
          min-width="160" />
        <el-table-column prop="enterpriseCount" label="企业总数" align="center" min-width="120" />
        <el-table-column prop="constructionTotal" label="建档期岗位" align="center" min-width="140" />
        <el-table-column prop="investigationTotal" label="调查期岗位" align="center" min-width="140" />
        <el-table-column prop="changeTotal" label="岗位变化" align="center" min-width="120">
          <template #default="{ row }">
            <span :class="row.changeTotal >= 0 ? 'text-success' : 'text-danger'">
              {{ row.changeTotal > 0 ? '+' : '' }}{{ row.changeTotal }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="失业率(%)" align="center" min-width="120">
          <template #default="{ row }">
            <span :class="row.changeRatio >= 0 ? 'text-success' : 'text-danger'">
              {{ row.changeRatio.toFixed(2) }}%
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- Empty State -->
    <div v-if="!loading && tableData.length === 0" class="empty-card">
      <el-empty description="请选择调查期后查询" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';
import dataAnalysisApi from '@/api/dataAnalysis';
import periodApi from '@/api/period';

// ... (script logic remains exactly the same) ...
// ==================== 数据定义 ====================

const loading = ref(false);
const chartRef = ref(null);
let chartInstance = null;

// 查询参数
const queryParams = ref({
  periodIds: [],
  groupBy: '', // 空字符串表示全省汇总
});

// 展示模式
const displayMode = ref('ratio');

// 调查期列表
const periodList = ref([]);

const periodOptions = computed(() => {
  const groups = {};

  periodList.value.forEach(period => {
    const name = period.investigateTime || '';
    const yearMatch = name.match(/^(\d{4})/);
    const year = yearMatch ? yearMatch[1] : '其他';

    if (!groups[year]) {
      groups[year] = [];
    }

    let monthLabel = name;
    if (year !== '其他') {
      monthLabel = name.replace(year, '').replace(/^[年-]/, '');
    }

    groups[year].push({
      value: period.periodId,
      label: monthLabel
    });
  });

  return Object.keys(groups)
    .sort((a, b) => b.localeCompare(a))
    .map(year => ({
      value: year,
      label: year === '其他' ? '其他' : `${year}年`,
      children: groups[year]
    }));
});

// 统计数据
const stats = ref({
  avg: null,
  max: null,
  min: null,
  range: null,
});

// 图表数据
const chartData = ref({
  periods: [],
  ratioData: [],
  constructionData: [],
  investigationData: [],
  enterpriseData: [],
});

// 表格数据
const tableData = ref([]);

// ==================== 计算属性 ====================

const chartTitle = computed(() => {
  const titles = {
    ratio: '失业率趋势',
    count: '岗位数量趋势',
    enterprise: '企业总数趋势',
  };
  return titles[displayMode.value] || '数据趋势';
});

// ==================== 生命周期 ====================

onMounted(async () => {
  await loadPeriodList();
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose();
  }
  window.removeEventListener('resize', handleResize);
});

// ==================== 方法定义 ====================

async function loadPeriodList() {
  try {
    // 传递足够大的pageSize获取所有调查期
    const response = await periodApi.getPeriodList({ pageSize: 100 });
    if (response.status === 'success') {
      periodList.value = response.data.list || [];
    }
  } catch (error) {
    console.error('加载调查期列表失败:', error);
    ElMessage.error('加载调查期列表失败');
  }
}

async function handleQuery() {
  // 参数验证
  if (!queryParams.value.periodIds || queryParams.value.periodIds.length === 0) {
    ElMessage.warning('请至少选择一个调查期');
    return;
  }

  loading.value = true;

  try {
    const params = {
      periodIds: queryParams.value.periodIds,
      statuses: [4],  // 只统计已归档(4)的数据
      ...(queryParams.value.groupBy && queryParams.value.groupBy !== 'total'
        ? { groupBy: queryParams.value.groupBy }
        : {}),
    };

    const response = await dataAnalysisApi.getTrendAnalysis(params);

    if (response.status === 'success') {
      const data = response.data || [];

      // 更新表格数据
      tableData.value = data;

      // 准备图表数据（根据是否分组采用不同策略）
      if (queryParams.value.groupBy && queryParams.value.groupBy !== 'total') {
        // 有分组：按维度分组（地区/性质/行业）
        prepareGroupedChartData(data);
      } else {
        // 无分组或全省汇总：使用简单图表
        prepareSimpleChartData(data);
      }

      // 计算统计数据
      calculateStats(data);

      // 渲染图表
      nextTick(() => {
        renderChart();
      });

      ElMessage.success('查询成功');
    } else {
      ElMessage.error(response.info || '查询失败');
    }
  } catch (error) {
    console.error('查询失败:', error);
    ElMessage.error('查询失败，请稍后重试');
  } finally {
    loading.value = false;
  }
}

/**
 * 准备简单图表数据（全省汇总）
 */
function prepareSimpleChartData(data) {
  chartData.value = {
    periods: data.map(item => item.periodName),
    ratioData: data.map(item => item.changeRatio),
    constructionData: data.map(item => item.constructionTotal),
    investigationData: data.map(item => item.investigationTotal),
    enterpriseData: data.map(item => item.enterpriseCount),
    isGrouped: false,
  };
}

/**
 * 准备分组图表数据（按地区/性质/行业）
 * 数据结构转换：将平铺数据按维度和时期分组
 */
function prepareGroupedChartData(data) {
  // 1. 提取所有时期（去重并排序）
  const periods = [...new Set(data.map(item => item.periodName))].sort();

  // 2. 提取所有维度（去重）
  const dimensions = [...new Set(data.map(item => item.dimensionName))];

  // 3. 按维度分组数据
  const groupedData = {};
  dimensions.forEach(dimension => {
    groupedData[dimension] = {
      ratioData: [],
      constructionData: [],
      investigationData: [],
      enterpriseData: [],
    };
  });

  // 4. 填充数据（按时期顺序）
  periods.forEach(period => {
    dimensions.forEach(dimension => {
      // 找到对应的数据项
      const item = data.find(d => d.periodName === period && d.dimensionName === dimension);

      if (item) {
        groupedData[dimension].ratioData.push(item.changeRatio);
        groupedData[dimension].constructionData.push(item.constructionTotal);
        groupedData[dimension].investigationData.push(item.investigationTotal);
        groupedData[dimension].enterpriseData.push(item.enterpriseCount);
      } else {
        // 如果某个时期没有数据，填充null
        groupedData[dimension].ratioData.push(null);
        groupedData[dimension].constructionData.push(null);
        groupedData[dimension].investigationData.push(null);
        groupedData[dimension].enterpriseData.push(null);
      }
    });
  });

  chartData.value = {
    periods,
    dimensions,
    groupedData,
    isGrouped: true,
  };
}

function calculateStats(data) {
  if (data.length === 0) {
    stats.value = { avg: null, max: null, min: null, range: null };
    return;
  }

  const ratios = data.map(item => item.changeRatio);
  const avg = ratios.reduce((sum, val) => sum + val, 0) / ratios.length;
  const max = Math.max(...ratios);
  const min = Math.min(...ratios);
  const range = max - min;

  stats.value = {
    avg: avg.toFixed(2),
    max: max.toFixed(2),
    min: min.toFixed(2),
    range: range.toFixed(2),
  };
}

function renderChart() {
  if (!chartRef.value) return;

  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value);
  }

  let option = {};

  // 根据是否分组选择不同的渲染策略
  if (chartData.value.isGrouped) {
    option = renderGroupedChart();
  } else {
    option = renderSimpleChart();
  }

  chartInstance.setOption(option, true); // true表示不合并配置
}

/**
 * 渲染简单图表（全省汇总）
 */
function renderSimpleChart() {
  if (displayMode.value === 'ratio') {
    // 失业率趋势图
    return {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e5e5e7',
        textStyle: { color: '#1d1d1f' },
        formatter: (params) => {
          return params[0].name + '<br/>' + '失业率: ' + params[0].value + '%';
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '10%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: chartData.value.periods,
        axisLabel: { color: '#86868b' },
        axisLine: { lineStyle: { color: '#e5e5e7' } },
      },
      yAxis: {
        type: 'value',
        name: '失业率(%)',
        axisLabel: { formatter: '{value}%', color: '#86868b' },
        splitLine: { lineStyle: { color: '#f5f5f7' } },
        axisLine: { lineStyle: { color: '#e5e5e7' } },
        nameTextStyle: { color: '#86868b' },
      },
      series: [
        {
          name: '失业率',
          type: 'line',
          smooth: true,
          data: chartData.value.ratioData,
          itemStyle: { color: '#0071e3' },
          lineStyle: { width: 3 },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(0, 113, 227, 0.2)' },
              { offset: 1, color: 'rgba(0, 113, 227, 0.0)' },
            ]),
          },
          markLine: {
            data: [{ type: 'average', name: '平均值' }],
            label: { formatter: '平均: {c}%', color: '#86868b' },
            lineStyle: { color: '#86868b', type: 'dashed' },
          },
          markPoint: {
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' },
            ],
            itemStyle: { color: '#0071e3' },
          },
        },
      ],
    };
  } else if (displayMode.value === 'count') {
    // 岗位数量趋势图（双线）
    return {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e5e5e7',
        textStyle: { color: '#1d1d1f' },
      },
      legend: {
        data: ['建档期岗位', '调查期岗位'],
        top: 0,
        textStyle: { color: '#86868b', fontSize: 13 },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: chartData.value.periods,
        axisLabel: { color: '#86868b' },
        axisLine: { lineStyle: { color: '#e5e5e7' } },
      },
      yAxis: {
        type: 'value',
        name: '岗位数量',
        axisLabel: { color: '#86868b' },
        splitLine: { lineStyle: { color: '#f5f5f7' } },
        axisLine: { lineStyle: { color: '#e5e5e7' } },
        nameTextStyle: { color: '#86868b' },
      },
      series: [
        {
          name: '建档期岗位',
          type: 'line',
          smooth: true,
          data: chartData.value.constructionData,
          itemStyle: { color: '#0071e3' },
          lineStyle: { width: 3 },
        },
        {
          name: '调查期岗位',
          type: 'line',
          smooth: true,
          data: chartData.value.investigationData,
          itemStyle: { color: '#30d158' },
          lineStyle: { width: 3 },
        },
      ],
    };
  } else {
    // 企业总数趋势图
    return {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e5e5e7',
        textStyle: { color: '#1d1d1f' },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '10%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: chartData.value.periods,
        axisLabel: { color: '#86868b' },
        axisLine: { lineStyle: { color: '#e5e5e7' } },
      },
      yAxis: {
        type: 'value',
        name: '企业总数',
        axisLabel: { color: '#86868b' },
        splitLine: { lineStyle: { color: '#f5f5f7' } },
        axisLine: { lineStyle: { color: '#e5e5e7' } },
        nameTextStyle: { color: '#86868b' },
      },
      series: [
        {
          name: '企业总数',
          type: 'line',
          smooth: true,
          data: chartData.value.enterpriseData,
          itemStyle: { color: '#ff9f0a' },
          lineStyle: { width: 3 },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(255, 159, 10, 0.2)' },
              { offset: 1, color: 'rgba(255, 159, 10, 0.0)' },
            ]),
          },
        },
      ],
    };
  }
}

/**
 * 渲染分组图表（按地区/性质/行业）
 * 每个维度一条趋势线
 */
function renderGroupedChart() {
  const { dimensions, groupedData, periods } = chartData.value;

  // 颜色方案（最多支持10个维度）
  const colors = [
    '#0071e3', '#30d158', '#ff9f0a', '#ff3b30', '#bf5af2',
    '#5ac8fa', '#ffcc00', '#ff2d55', '#5e5ce6', '#32d74b'
  ];

  let series = [];

  if (displayMode.value === 'ratio') {
    // 失业率趋势（每个维度一条线）
    series = dimensions.map((dimension, index) => ({
      name: dimension,
      type: 'line',
      smooth: true,
      data: groupedData[dimension].ratioData,
      itemStyle: { color: colors[index % colors.length] },
      lineStyle: { width: 2 },
      connectNulls: true, // 连接空值
    }));

    return {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e5e5e7',
        textStyle: { color: '#1d1d1f' },
      },
      legend: {
        data: dimensions,
        top: 0,
        textStyle: { color: '#86868b', fontSize: 12 },
        type: 'scroll', // 支持滚动（维度多时）
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: dimensions.length > 5 ? '15%' : '12%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: periods,
        axisLabel: { color: '#86868b', fontSize: 11 },
        axisLine: { lineStyle: { color: '#e5e5e7' } },
      },
      yAxis: {
        type: 'value',
        name: '失业率(%)',
        axisLabel: { formatter: '{value}%', color: '#86868b' },
        splitLine: { lineStyle: { color: '#f5f5f7' } },
        axisLine: { lineStyle: { color: '#e5e5e7' } },
        nameTextStyle: { color: '#86868b' },
      },
      series,
    };
  } else if (displayMode.value === 'count') {
    // 岗位数量趋势（每个维度两条线：建档期+调查期）
    dimensions.forEach((dimension, index) => {
      series.push(
        {
          name: `${dimension}-建档期`,
          type: 'line',
          smooth: true,
          data: groupedData[dimension].constructionData,
          itemStyle: { color: colors[index % colors.length] },
          lineStyle: { width: 2, type: 'solid' },
          connectNulls: true,
        },
        {
          name: `${dimension}-调查期`,
          type: 'line',
          smooth: true,
          data: groupedData[dimension].investigationData,
          itemStyle: { color: colors[index % colors.length] },
          lineStyle: { width: 2, type: 'dashed' },
          connectNulls: true,
        }
      );
    });

    return {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e5e5e7',
        textStyle: { color: '#1d1d1f' },
      },
      legend: {
        data: series.map(s => s.name),
        top: 0,
        textStyle: { color: '#86868b', fontSize: 12 },
        type: 'scroll',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '18%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: periods,
        axisLabel: { color: '#86868b', fontSize: 11 },
        axisLine: { lineStyle: { color: '#e5e5e7' } },
      },
      yAxis: {
        type: 'value',
        name: '岗位数量',
        axisLabel: { color: '#86868b' },
        splitLine: { lineStyle: { color: '#f5f5f7' } },
        axisLine: { lineStyle: { color: '#e5e5e7' } },
        nameTextStyle: { color: '#86868b' },
      },
      series,
    };
  } else {
    // 企业总数趋势（每个维度一条线）
    series = dimensions.map((dimension, index) => ({
      name: dimension,
      type: 'line',
      smooth: true,
      data: groupedData[dimension].enterpriseData,
      itemStyle: { color: colors[index % colors.length] },
      lineStyle: { width: 2 },
      connectNulls: true,
    }));

    return {
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        borderColor: '#e5e5e7',
        textStyle: { color: '#1d1d1f' },
      },
      legend: {
        data: dimensions,
        top: 0,
        textStyle: { color: '#86868b', fontSize: 12 },
        type: 'scroll',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: dimensions.length > 5 ? '15%' : '12%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: periods,
        axisLabel: { color: '#86868b', fontSize: 11 },
        axisLine: { lineStyle: { color: '#e5e5e7' } },
      },
      yAxis: {
        type: 'value',
        name: '企业总数',
        axisLabel: { color: '#86868b' },
        splitLine: { lineStyle: { color: '#f5f5f7' } },
        axisLine: { lineStyle: { color: '#e5e5e7' } },
        nameTextStyle: { color: '#86868b' },
      },
      series,
    };
  }
}

function handleResize() {
  if (chartInstance) {
    chartInstance.resize();
  }
}

/**
 * 获取维度标签
 */
function getDimensionLabel() {
  const labels = {
    region: '地区',
    nature: '性质',
    industry: '行业',
  };
  return labels[queryParams.value.groupBy] || '维度';
}
</script>

<style scoped lang="scss">
.trend-analysis {
  /* Search Card */
  .search-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid rgba(241, 245, 249, 1);
  }

  .search-section {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-end;
  }

  .filter-item {
    display: flex;
    flex-direction: column;
    gap: 8px;

    label {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }
  }

  .filter-actions {
    padding-bottom: 2px;
  }

  /* Inputs & Buttons */
  .custom-select {
    :deep(.el-input__wrapper) {
      border-radius: 8px;
      box-shadow: 0 0 0 1px #e2e8f0 inset;
      padding: 6px 12px;
      &.is-focus { box-shadow: 0 0 0 2px #818cf8 inset; }
    }
  }

  .btn-primary-theme {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
    transition: all 0.2s;
    font-weight: 600;
    height: 40px;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
    }
  }

  /* Stats Grid */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
  }

  .stat-card {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    text-align: center;
    transition: all 0.2s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05);
    }

    .stat-label {
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      margin-bottom: 12px;
      letter-spacing: 0.5px;
    }

    .stat-value {
      color: #0f172a;
      font-size: 32px;
      font-weight: 800;
      line-height: 1.2;

      &.positive { color: #10b981; }
      &.negative { color: #ef4444; }
    }
  }

  /* Chart & Table Cards */
  .chart-card, .table-card, .empty-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(241, 245, 249, 1);
    margin-bottom: 24px;
    overflow: hidden;
  }

  .card-header {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
  }

  .card-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
  }

  .chart-wrapper {
    padding: 24px;
  }

  .chart-container {
    width: 100%;
    height: 420px;
  }

  /* Modern Table Styles */
  .modern-table {
    --el-table-border-color: #f1f5f9;
    --el-table-row-hover-bg-color: #f8fafc;
    --el-table-header-bg-color: #f8fafc;
  }

  .cell-primary-text {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
  }

  .text-success { color: #10b981; font-weight: 600; }
  .text-danger { color: #ef4444; font-weight: 600; }

  .empty-card {
    padding: 60px 0;
  }
}
</style>